<%--
  Created by IntelliJ IDEA.
  User: 梁玉杰
  Date: 2021/7/20
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- layui css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/libs/layui/css/layui.css" />
    <!-- layui js -->
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/libs/jquery/jquery-3.5.1.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/libs/layui/layui.js"
            charset="utf-8"></script>

<%--
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
--%>
</head>
<body style="min-height: 1000px;">
<div class="layui-container" >
    <table class="layui-hide" id="table_user" lay-filter="test"></table>
    <script type="text/html" id="actionBar">
        {{#  if(d.sex =='女'){   }}
        <a class="layui-btn layui-btn-xs" lay-event="comment">备注</a>
        {{#  }    }}
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script type="text/html" id="toolbar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="mult-del">批量删除</a>
    </script>
</div>

<script type="text/javascript">

    layui.use(['table','element'], function() {
        table = layui.table;
        //执行一个 table 实例
        table.render({
            elem: '#table_user'
            ,height: 420
            //整合到自己项目中是,您应该使用使用url参数,并且注释掉data参数
            // ,url: '/demo/table/user/' ,//数据接口,数据格式见 https://www.layui.com/doc/modules/table.html#async
            //data参数只是演示使用,实际项目,请实现上方url数据接口
            ,data:[{"id":10112,"username":"user-112","sex":"女","city":"城市-112","sign":"签名-112","experience":430,"logins":157,"wealth":11201724,"classify":"酱油","score":37},{"id":10113,"username":"user-113","sex":"男","city":"城市-113","sign":"签名-113","experience":139,"logins":115,"wealth":67486950,"classify":"词人","score":94},{"id":10114,"username":"user-114","sex":"女","city":"城市-114","sign":"签名-114","experience":598,"logins":70,"wealth":90954340,"classify":"词人","score":71},{"id":10115,"username":"user-115","sex":"女","city":"城市-115","sign":"签名-115","experience":512,"logins":138,"wealth":36298584,"classify":"酱油","score":83},{"id":10116,"username":"user-116","sex":"男","city":"城市-116","sign":"签名-116","experience":537,"logins":71,"wealth":72662141,"classify":"诗人","score":85}]
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: '#toolbar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,totalRow: true ,//开启合计行
            limit:3,//设置每页显示条数,根据自己项目情况去设置
            limits:[1,2,3]//设置每页条数下拉框的选择项,就是分页那一栏的下拉框选项
            ,
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：'}
                , {field: 'username', title: '用户名', width: 80}
                , {field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
                , {field: 'sex', title: '性别', width: 80, sort: true}
                , {field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
                , {field: 'city', title: '城市', width: 150}
                , {field: 'sign', title: '签名', width: 200}
                , {field: 'classify', title: '职业', width: 100}
                , {field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
                , {fixed: 'right', minWidth: '101px', align: 'center', toolbar: '#actionBar'}
            ]],
            size: 'lg'
        });
        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'mult-del':
                    if(data.length === 0){
                        layer.msg('请至少选择一行');
                    } else {
                        layer.confirm('真的删除选择行吗', function(index){
                            var result = [];
                            for (var i in data) {
                                result.push(data[i]['id']);
                            }
                            //关闭弹窗
                            layer.close(index);
                            layer.alert("您选择了删除这些id:"+JSON.stringify(result)+",使用ajax 发送这些数据给后端就行了")
                            //向服务端发送删除指令
                            // $.ajax({
                            //         url:"批量删除用户的接口",
                            //         type:"POST",
                            //         data:result,
                            //         success:function(data){
                            //             console.log(data)
                            //             //表格重新加载
                            //             table.reload('table_user', {
                            //               url: '重载数据的接口'//重载数据的接口,一般和上方初始化render中的url相同
                            //               ,where: {} //无则不填,设定异步数据接口的额外的get参数
                            //             });
                            //         }
                            // })
                        });


                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'detail'){
                //内嵌iframe加载自己的详情页面地址
                openFrame("https://www.baidu.com/baidu?word="+data.username+"&ie=utf-8&tn=maxco3_dg&ch=1")
            } else if(layEvent === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    // $.ajax({
                    //         url:"删除用户的接口",
                    //         type:"POST",
                    //         data:{user_id:data.id},
                    //         success:function(data){
                    //             console.log(data)
                    //         }
                    // })
                });
            } else if(layEvent === 'edit'){
                // 1.免加载url弹窗(参考[备注按钮]) addComment()
                // 2.iframe加载url弹窗(参考[查看按钮]) openFrame()
                // 3.使用location.href直接重定向
                layer.alert('编辑操作,你可以灵活选择以下方式:<br>1.免加载url弹窗(参考[备注按钮])<br>2.iframe加载url弹窗(参考[查看按钮])<br>3.使用location.href直接重定向');
            }else if(layEvent === 'comment'){
                //免加载页面弹窗
                addComment(data.id,data.username)
            }
        });
    })
    /**
     * 备注功能(在点击事件中调用此函数即可,或在标签中onclick属性直接调用)
     * @param {Object} user_id 用户id
     */
    function addComment(user_id,username=""){
        layui.use(['layer','laytpl'], function() {
            var $ = layui.$ //重点处,layui有内置jquery模块
            var layer = layui.layer,laytpl=layui.laytpl;
            //给模板 tpl-user 传递参数
            var tpldata = {
                "user_id": user_id,
                "username": username?username:"傻瓜教程",
                "content": "",
            };
            //获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
            laytpl(document.getElementById('tpl-user').innerText)
                .render(tpldata,function(html){
                    //渲染完成后直接打开
                    layer.open({
                        type: 1,
                        shade: false,
                        area: ['80%', '50%'],
                        title: false, //不显示标题
                        content: html,
                    });
                });
        });

    }
    //以iframe的形式加载url
    function openFrame(url,width=0,height=0){
        $ = layui.$;
        layer.open({
            type: 2,
            title: '窗口',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area : [width?width:$(window).width()*0.8+'px', height?height:$(window).height()*0.92+'px'],
            content: url
        });

    }
</script>
<noscript id="tpl-user" >
    <!-- style 尽量不要影响到页面其他元素,使用#userinfo范围限定 -->
    <style type="text/css">
        #userinfo .layui-form-label.layui-required:after {
            content: "*";
            color: red;
            position: absolute;
            top: 10px;
            right: 5px;
        }
    </style>
    <div class="layui-card" id="userinfo">
        <div class="layui-card-header">用户备注框</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="info">
                <div class="layui-form-item">
                    <label class="layui-form-label layui-required">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
                               autocomplete="off" value="{{d.username}}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <!-- 其他复杂表单参考--http://www.shagua.wiki/project/3?p=121 -->
                    <label class="layui-form-label">复选框</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="like[write]" title="写作">
                        <input type="checkbox" name="like[read]" title="阅读" checked="">
                        <input type="checkbox" name="like[game]" title="游戏">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">用户备注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" name="content" lay-verify="contentRule" class="layui-textarea">{{d.content}}</textarea>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn tt" lay-submit="" lay-filter="demo1">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <!-- 下方script标签中不能使用单行注释语句,否则laytpl编译解析会报错-->
            <!-- 语句之间也要严格用分号隔开,因为laytpl编译时,那些换行都被去掉了,导致代码连在一起 -->
            <script>
                layui.use(['jquery', 'form'], function() {
                    var $ = layui.$;
                    var form = layui.form,layer = layui.layer,laydate = layui.laydate;
                    $('.layui-btn.tt').on('click',function() {
                        console.log(121212)
                    });
                    form.verify({
                        contentRule: function(value) {
                            if (value.length < 5) {
                                return '标题至少得5个字符啊';
                            }
                        },
                    });
                    form.on('submit(demo1)', function(data) {
                        layer.alert(JSON.stringify(data.field), {
                            title: '用户id为:{{d.user_id}}的提交信息'
                        });
                        /**可以在ajax 地址中,传入user_id参数*/
                        /**
                         var postData = {};
                         $.post("/modify/user?user_id={{d.user_id}}",postData,function(data,status){
                                    console.log(data);
                                    layer.closeAll();
                                });
                         */
                        return false;
                    });
                    /** 要使用render,复杂表单才能显示 */
                    form.render();
                });
            </script>
        </div>
    </div>
</noscript>
</body>

</html>
